<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorator="partial/layoutAdmin">
  <head>
    <title>tag</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    .el-tag{
        padding: 0 10px;
    height: 32px;
    line-height: 30px;
    font-size: 12px;
    color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(64, 158, 255, .2);
    }
    .el-tag .el-icon-close{
    color: #fff;
    }
    </style>
  </head>
  <body>
  <div layout:fragment="content" style="padding:0 30px">
      <el-row>
		  <el-col :span="12">
			  <el-card class="box-card" style="min-height:420px">
			  <div slot="header" class="clearfix">
			    <span>当前可用标签</span>
			  </div>
			  <el-tag
				  v-for="tag in tags"
				  :key="tag.name" style="margin:5px;" :color="tag.color"
				  closable @close="removeTag(tag)" @click="editTag">
				  {{tag.value}}
				</el-tag>
			</el-card>
		  </el-col>
		  <el-col :span="12">
			  <el-card class="box-card" style="min-height:420px">
				  <div slot="header" class="clearfix">
				    <span>添加选项</span>
				  </div>
				  <el-form :inline="true"  class="demo-form-inline">
					  <el-form-item label="标签名称">
					     <el-input placeholder="请输入新标签" v-model="defaultTag" style="max-width:220px" clearable> </el-input>
					  </el-form-item>
					  <el-form-item label="选择颜色">
					  <el-color-picker
						  v-model="defaultColor"
						  show-alpha @change="colorChange"
						  :predefine="predefineColors">
						</el-color-picker>
						</el-form-item>
					  <el-button v-loading="loading" style="margin-left:10px" type="success" @click="addTag" >添加新标签 </el-button>  
				  </el-form>
			  </el-card>
		  </el-col>
		</el-row>
		</div>
		<div layout:fragment="jscontent">
		<script type="text/javascript">
		var loadAllTagList=function(){
			axios.post('/getTaglist', {})
			.then(function (response) {
				var result=response.data;
				if(result.code==0){
					app.tags=result.data;
				}
			})
			.catch(function (error) {
			 	console.log(error);
			});
			
		}
		 var app = new Vue({
	         el: '#app',
	         data:{
	        	 loading:false,
	        	 defaultId:0,
	        	 defaultColor:'#EB6841',
	        	 predefineColors: [
	        		 '#036564',
	                 '#EB6841',
	                 '#3FB8AF',
	                 '#FE4365',
	                 '#FC9D9A',
	                 '#EDC951',
	                 '#C8C8A9',
	                 '#83AF9B',
	                 '#8A9B0F',
	                 '#3299BB',
	                 '#ff4500',
	                 '#ff8c00',
	                 '#ffd700',
	                 '#90ee90',
	                 '#00ced1',
	                 '#1e90ff',
	                 '#c71585',
	                 'rgba(255, 69, 0, 0.68)',
	                 'rgb(255, 120, 0)',
	                 'hsv(51, 100, 98)',
	                 'hsva(120, 40, 94, 0.5)',
	                 'hsl(181, 100%, 37%)',
	                 'hsla(209, 100%, 56%, 0.73)',
	                 '#c7158577'
	               ],
	        	 defaultTag:'',
	        	 tags: []
	         },
	         created() {
	        	 this.loadAllTagList();
	         },
	         methods: {
	          loadAllTagList:loadAllTagList,
	   	      removeTag(tag) {
                  $.ajax({
                      data: {tagId:tag.id},
                      type: "POST",
                      url: '/tag/deleteTag',
                      traditional:true,
                      success: function (result) {
                          if(result.code==0){
                              app.tags.splice(app.tags.indexOf(tag), 1);
                              app.$message({
                                  showClose: true,
                                  message: result.msg,
                                  type: 'success'
                              });
                          }
                      },
                      error: function (data) {
                          app.$message({
                              showClose: true,
                              message: error,
                              type: 'error'
                          });
                      }
                  });
	   	      },
	   	      addTag(){
	   	    	  var value=this.defaultTag.trim();
	   	    	  if (JSON.stringify(this.tags).toLowerCase().indexOf(value.toLowerCase())==-1 )  {
	   	    		  var param={};
	   	    		  param.id=this.defaultId;
	   	    		  param.color=this.defaultColor;
	   	    		  param.name=this.defaultTag;
	   	    		  param.alia=this.defaultTag;
                      $.ajax({
                          data: param,
                          type: "POST",
                          url: '/tag/saveTag',
                          traditional:true,
                          /* async: false, */
                          success: function (result) {
                              if(result.code==0){
                                  app.tags.push({ value: value, color: app.defaultColor,id:result.id,alia:value });
                                  app.defaultTag='';
                                  app.$message({
                                      showClose: true,
                                      message: result.msg,
                                      type: 'success'
                                  });
                              }
                          },
                          error: function (data) {
                              app.$message({
                                  showClose: true,
                                  message: error,
                                  type: 'error'
                              });
						  }
                      });
	   	    		}
	   	    	 
	   	      },
	   	      editTag(){
	   	    	  console.log(tag);
	   	      },
	   	      colorChange(data){
	   	    	  this.defaultColor=data;
	   	      }
	         }})
		</script>
		</div>
  </body>
</html>